<template>
    <div>
    <!--搜索的框-->
        <el-form size="mini" :inline="true" :model="deptQuery" class="demo-form-inline" style="margin-top: 30px">
            <el-form-item label="部门名称">
                <el-input clearable v-model="deptQuery.name" placeholder="部门名称模糊查询"></el-input>
            </el-form-item>

            <el-form-item label="部门状态">
                <el-select clearable v-model="deptQuery.state" placeholder="部门状态">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="上级部门">
                <el-select clearable v-model="deptQuery.parentId" placeholder="上级部门">
                    <el-option v-for="item in parentDeptList" :label="item.name" :value="item.id"></el-option>

                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="success" @click="deptForm = {};dialogFormVisible=true">新增</el-button>
                <el-button type="danger" @click="batchDel">批量删除</el-button>
            </el-form-item>
        </el-form>
        <!---------------------------->

        <!--新增的按钮-->

        <!---------------------------------->

        <!--表格-->

        <el-table
                border
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >

            <el-table-column
                    type="selection"
                    width="55"
            >

            </el-table-column>

            <el-table-column
                    label="部门编号" prop="sn">

            </el-table-column>

            <el-table-column
                    label="部门名称"
                     prop="name">
            </el-table-column>

            <el-table-column
                    label="部门状态"
                     prop="state">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.state==0">正常</el-tag>
                    <el-tag type="danger" v-if="scope.row.state==1">禁用</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    label="部门管理员"
                     prop="managerName">
            </el-table-column>

            <el-table-column
                    label="上级部门"
                     prop="parentName">
            </el-table-column>

            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!--handleEdit(scope.$index, scope.row)-->
                    <el-button
                            size="mini"
                            type="danger"
                            @click="open(scope.$index, scope.row)">删除</el-button>
                    <!--handleDelete(scope.$index, scope.row)-->
                </template>
            </el-table-column>
        </el-table>


        <!--删除弹出框-->
        <div>
            <el-button type="text" @click="open"></el-button>
        </div>
        <!------------------------------------->



        <!--------------------------------------------->

        <!--分页的模块-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="deptQuery.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="deptQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!----------------------------------------->

        <!--新增和修改的模态框-->
        <el-dialog title="操作" :visible.sync="dialogFormVisible">
            <el-form :model="deptForm" :rules="rules" ref="ruleForm">

                <el-form-item label="部门编号" :label-width="formLabelWidth" prop="sn">
                    <el-input v-model="deptForm.sn" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="deptForm.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="部门状态" :label-width="formLabelWidth">
                    <el-select v-model="deptForm.state" placeholder="请选择部门状态">
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="部门管理员" :label-width="formLabelWidth">
                    <el-select v-model="deptForm.managerId" placeholder="请选择部门管理员">
                        <el-option
                                v-for="item in empLists"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="上级部门" :label-width="formLabelWidth">
                    <el-cascader :options="casOptions"
                                 v-model="deptForm.dirPath"
                                 :props="{checkStrictly:true,value:'id',label:'name'}"
                                 clearable></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>


        <!-------------------------------->
    </div>
</template>

<script>
    export default {
        name: "DeptManager",
        data() {
            return {
                casOptions:[],
                multipleSelection: [],
                rules: {
                    sn: [
                        { required: true, message: '请输入部门编号', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                    ]
                },
                empLists: [],
                dialogFormVisible: false,
                deptForm: {},
                formLabelWidth: '120px',
                parentDeptList:[],
                total:0,
                tableData: [],
                deptQuery: {
                    pageNum:1,
                    pageSize:5
                }
            }
        },
        methods: {

            batchDel(){
                    this.$confirm('此操作将永久删除这些文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let idss=this.multipleSelection;
                        let  ids = idss.map(arr=> arr.id)
                       this.$http.post("/dept/batchdel",ids).then(res=>{
                            if (res.data.success){
                                this.$message.success(res.data.msg);
                            }else{
                                this.$message.info(res.data.msg);
                            }
                        })
                        this.handleCurrentChange(1);

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.updateandadd();
                    } else {
                        return false;
                    }
                });
            },
           /* open4() {
                this.$message.error('操作失败了哦');
            },
            open2() {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
            },*/

            updateandadd(){
                if (this.deptForm.dirPath){
                   this.deptForm.dirPath = this.deptForm.dirPath.join(",")
                }

                this.$http.post("/dept/updateandadd",this.deptForm).then(res=>{
                    if (res.data.success){
                        this.$message.success(res.data.msg);
                    }else {
                        this.$message.info(res.data.msg);
                    }
                })
                this.dialogFormVisible = false
                this.handleCurrentChange(1);
            },
            open(index,row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(index,row);
                    this.handleCurrentChange(1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.deptQuery.pageSize=val;
                this.deptQuery.pageNum=1;
                this.toQuery();

            },
            handleCurrentChange(val) {
              //  console.log(`当前页: ${val}`);
                this.deptQuery.pageNum=val;
                this.toQuery();
            },
            handleEdit(index, row) {

                this.$http.get("/dept/finddeptbyid?id="+row.id).then(res=>{
                    this.deptForm=res.data;
                })

                this.dialogFormVisible = true
            },
            handleDelete(index, row) {
               // console.log(index, row);
                this.$http.get("/dept/delete?id="+row.id).then(res=>{
                    this.message=res.data.msg;
                })

            },
            toQuery() {
                this.$http.post("/dept/pagelist",this.deptQuery).then(res=>{
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                })
            },
            empList(){
                this.$http.get("/emp/findemplist").then(res=>{
                    this.empLists=res.data
                })
            }
        },
        mounted() {
            this.toQuery();
            this.$http.get("/dept/findall").then(res=>{
                this.parentDeptList = res.data;
            })
            this.$http.get("/dept/findtree").then(res=>{
                this.casOptions = res.data;
            })
            this.empList()
        }
    }
</script>

<style scoped>

</style>